<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.js"></script>
</head>
<body>
   <div id="app"></div>
   <script type="text/babel">
        class MyComponent extends React.Component{
            constructor(props) {
                super(props);
            }

            render() {
                return (
                    <div>
                        <h4 style = {this.props.style}>Hello world!</h4>
                        <h4>I am {this.props.name}</h4>
                        <h4>and {this.props.age} years old</h4>
                    </div>
                );
            };
        }

        let oDiv = document.getElementById('app');

        // 1. 把字符串当作参数传递
        // ReactDOM.render(
        //     <MyComponent name = "Huang JX" age = "21"/>,
        //     oDiv
        // );

        // 2. 把变量当作参数传递
        // let name = 'Huang JX';
        // let age = 21
        // ReactDOM.render(
        //     <MyComponent name = {name} age = {age}/>,
        //     oDiv
        // );

        // 3. 把对象当作参数传递
        let nameValue = 'Huang JX';
        let age = 21
        let style = {color: '#f00', backgroundColor: '#fff'}
        ReactDOM.render(
            <MyComponent name = {nameValue} age = {age} style={style}/>,
            oDiv
        );
   </script>
</body>
</html>